<!-- src/views/HomePage.vue -->
<template>
  <div class="home-page">
    <SideMenu />
    <div class="content">
      <div class="header">
        <h1>Welcome to the Dashboard</h1>
        <button class="logout-btn" @click="handleLogout">退出登录</button>
      </div>
      <!-- 其他内容 -->
    </div>
  </div>
</template>

<script>
import SideMenu from '@/components/SideMenu.vue';

export default {
  components: {
    SideMenu,
  },
  methods: {
    handleLogout() {
      // 清除本地存储的 token 和其他用户信息
      localStorage.removeItem('token');
      localStorage.removeItem('user');
      localStorage.removeItem('staffInfo');
      // 跳转到登录页面
      this.$router.push('/login');
    },
  },
};
</script>

<style scoped>
.home-page {
  display: flex;
  height: 100vh;
}

.content {
  flex: 1;
  padding: 20px;
  background-color: #f4f4f4;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.logout-btn {
  padding: 10px 20px;
  background-color: #f44336;
  color: white;
  border: none;
  cursor: pointer;
}

.logout-btn:hover {
  background-color: #d32f2f;
}
</style>
